<template>
  <div class="com">
        <div>
            <p>全部</p>
            <p>
              <i>有图</i>
              <span>({{comList.with_img_count}})</span>
            </p>
            <p>
              <i>好评</i>
              <span>({{comList.great_count}})</span>
            </p>
            <p>
              <i>中评</i>
              <span>({{comList.general_count}})</span>
            </p>
            <p>
              <i>差评</i>
              <span>({{comList.bad_count}})</span>
            </p>
        </div>
        <ul>
            <li v-for="item in comm">
                <span v-text="'用户: '+item.nick_name"></span>
                <p v-text="item.content"></p>
            </li>
        </ul>
  </div>
</template>

<script>

  export default{
    props:['comm','comList']
  }

</script>

<style>
.com{
    height: 500px;
}
.com>div{
    border-radius: 3px;
    margin:10px;
    border: solid 1px #CCC;
}
.com>div:after{
    content: '';
    height: 0;
    display: block;
    clear: both;
}
.com>div>p{
    width: 19.6%;
    text-align: center;
    height: 32px;
    line-height: 15px;
    padding-top: 3px;
    font-size: 1.1rem;
    float: left;
    position: relative;
    border-right: 1px solid #ccc;
}
.com>div>p:first-of-type{
    background-color: #ccc;
    color: #fff;
    line-height: 29px;
}
.com>div>p:last-of-type{
    border-right: 0;
}
.com>div>p>i{
    display: block;
    color: #000;
}
.com>div>p>span{
    color: #ccc;
}
.com>ul>li{
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
}
.com>ul>li>span{
    font-size: 1.1rem;
}
.com>ul>li>p{
    margin-top: 8px;
}
</style>
